<template>
	<view>
		<view class="dialog-model" v-if="isChoice"></view>
		<view class="banner">
			<swiper :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item >
					<view class="swiper-item">
						<image :src="goodsInfo.goods_thumbnail_image" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	<view class="box">
		<view class="goods">
				<text class="goods_ame">{{goodsInfo.goods_name}}</text>
				<text class="extend_name">{{goodsInfo.goods_extend_name}}</text>
				<text class="uni-product-price-favour" style="margin: 0;">市场价：￥{{goodsInfo.goods_price}}</text>
				<text class="uni-product-price-original" v-if="goodsInfo.goods_shop_price">店铺价：￥{{goodsInfo.goods_shop_price}}</text>
				<view class="short_detail" @click="showChoice">
					<text class="stock">库存：{{goodsInfo.goods_stock}}</text>
					<text class="sale">月销量：{{goodsInfo.virtual_sales}}</text>
					<text class="click">浏览量：{{goodsInfo.goods_click}}</text>
				</view>
				<!-- 商品规格 -->
	
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" >
					<view class="uni-list-cell-navigate uni-navigate-right" @click="showChoice()">
						请选择
					</view>
				</view>
			</view>
			<view class=" uni-common-mt">
				<uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
			</view>
			<view class="content" style="margin-top: 20upx;">
				<view v-show="current === 0">
					暂无商品描述
				</view>
				<view v-show="current === 1">
					暂无商品评价
				</view>
				<view v-show="current === 2">
					暂无商品咨询
				</view>
			</view>
</view>
		<!-- 选择商品规格 -->
<view class="choice_box">
		<view class="choice" v-if="isChoice">
			<view class="top">
				<image src="" mode="">
				</image>
				<view class="top_center">
					<text>价格:{{ specInfo.price }}</text>
					<text>库存:{{ specInfo.stock }}</text>
					<text>销量：{{ specInfo.goods_integral }}</text>
				</view>
				<uni-icon class="closeempty" type="closeempty" size="36" @click='closeChoice()'></uni-icon>
			</view>
			<view class="section">
				<scroll-view scroll-y style="height: 225px;"
				:scroll-into-view="toView" :scroll-top="scrollTop">
					<view class="center" v-for="(item, index) in goods_spec_group_array" :key='item.tag_group_id'>
						<text>{{item.tag_group_name}}</text>
						<radio-group class="radio-group" @change="radioChange">
							<label class="radio" v-for="(item, i) in item.spec_tag" :key="item.tag_id">
								<radio :value="item.tag_id" :checked="item.checked" />{{item.tag_name}}
							</label>
						</radio-group>
					</view>
					<view class="uni-inline-item" style="padding-top: 20upx;">
						<text>购买数量 : </text>
						<uni-number-box :min="1" v-on:change="onNumberChange" :value='1'></uni-number-box>
					</view>
				</scroll-view>
			</view>
			<view class="bottom">
				<button type="primary" @click="handleAddCart()">加入购物车</button>
			</view>
		</view>
	
</view>		
			</view>
	</view>
</template>

<script>
	import uniSegmentedControl from '../components/uni-segmented-control.vue';

	import uniBadge from "../components/uni-badge.vue";
	import uniIcon from "../components/uni-icon.vue"
	import uniNumberBox from '../components/uni-number-box.vue'
	import {
		getGoodsInfo,
		getGoodsStock,
		addCart,
		delAddress
	} from '../common/api.js'
	import {
		showError,
		showSuccess
	} from '../common/fast.js'
	var order = ['red', 'yellow', 'blue', 'green', 'red']
	export default {
		components: {
			uniSegmentedControl,
			uniBadge,
			uniIcon,
			uniNumberBox
		},
		data() {
			return {
				isChoice: false, // 是否显示购买商品的规格
				urlParms: {}, // 上一个页面传来的参数
				goodsInfo: {}, // 商品信息
				toView: 'red',
				scrollTop: 100,
				goods_spec_group_array:{}, // 商品规格对象
				specInfo: {}, // 规格信息
				buy_goods_num: 1, // 购买数量
				tag_id: '', //商品规格id
				
				items: [
					'商品描述',
					'商品评价',
					'商品咨询'
				],
				styles: [{
					value: 'button',
					text: '按钮',
					checked: true
				}, {
					value: 'text',
					text: '文字'
				}],
				colors: [
					'#007aff',
					'#4cd964',
					'#dd524d'
				],
				current: 0,
				activeColor: '#dd524d',
				styleType: 'text'
			}
		},
		methods: {
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			radioChange: function (e) {
            console.log('radio发生change事件，携带value值为：' + e.detail.value)
						this.tag_id = e.detail.value
						let goods_id = this.goodsInfo.goods_id
						this.handleGoodsStock(this.tag_id, goods_id)
        },
		onNumberChange(value){
			console.log('购买数量 : ' + value.num);
			this.buy_goods_num = value.num
		},
			handleGoodsInfo() {
				let reqData = {
					goods_id: this.urlParms.goods_id,
					class_id: this.urlParms.class_id
				}
				getGoodsInfo(reqData).then(res => {
					let resData = res.data
					this.goodsInfo = resData.result
					this.goods_spec_group_array = resData.result.goods_spec_group_array;
					console.log(JSON.stringify(this.goods_spec_group_array))
				})
			},
			handleGoodsStock(tag_id, goods_id){
				let reqData = {
					spec_tag_id_str: tag_id
				}
				getGoodsStock(reqData, goods_id).then( res => {
					this.specInfo = res.data
					this.specInfo.price = this.specInfo.price.replace(/&nbsp;/g,"")
				})
			},
			handleAddCart(){
				let reqData = {
					class_id: this.urlParms.class_id,
					goods_id: this.urlParms.goods_id,
					buy_goods_num: this.buy_goods_num,
					user_unionid: this.$store.state.userInfo.user_unionid,
					spec_tag_id_str: this.tag_id
				}
				console.log(JSON.stringify(reqData))
				addCart(reqData).then( res => {
					let resData = res.data
					if( resData.status == 'success' ){
						showSuccess(resData.msg)
						this.isChoice = !this.isChoice
						
					}else{
						showError(resData.msg)
					}
				})
			},
			// 显示购买规格
			showChoice() {
				console.log('show choice')
				this.isChoice = !this.isChoice
			},
			closeChoice() {
				console.log('close choice')
				this.isChoice = !this.isChoice
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
			},
			tap: function(e) {
				for (var i = 0; i < order.length; ++i) {
					if (order[i] === this.toView) {
						this.toView = order[i + 1];
						break
					}
				}
			},
			tapMove: function(e) {
				this.scrollTop = this.scrollTop + 10
			}
		},

		onLoad(option) {
			this.urlParms = option
			this.handleGoodsInfo()
		}
	}
</script>

<style>
	.dialog-model {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
	}
	.banner image {
		display: block;
		width: 100%;
		height: 307.5upx;
	}
	.box{
		padding: 20upx 20upx 0;
	}
	.goods {
		display: flex;
		flex-direction: column;
	}

	.short_detail {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.specification {
	
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.choice {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: white;
		height: 800upx;
		z-index: 99;
	}

	.choice .top {
		position: relative;
		height: 240upx;
	}

	.choice .top image {
		width: 240upx;
		height: 240upx;
		background: #C9C9C9;
		position: absolute;
		left: 0;
		top: 0;
	}

	.choice .top .top_center {
		position: absolute;
		left: 260upx;
		bottom: 0;
		display: flex;
		flex-direction: column;
	}

	.choice .top .uni-icon {
		position: absolute;
		right: 0;
		top: 0;
	}

	.choice .center {
		display: flex;
		flex-direction: column;
	}

	.choice .center .btn-area {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.choice .bottom{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>
